<template>
    <div class="shopping-cart">
      <h2>Shopping Cart</h2>
      <!-- 商品列表 -->
      <div class="product-list">
        <template v-for="item in myshops" :key="item.id">
          <slot :item="item"></slot>
        </template>
      </div>
  
      <!-- 购物车总结 -->
      <div class="cart-summary">
        <h2>Cart Summary</h2>
        <div>
          Total Items: <span>{{ myshops.length }}</span>
        </div>
        <div>
          Total Price: <span>{{ allPrice }}</span>
        </div>
        <button class="checkout-btn">Checkout</button>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { type IshopInfo } from '@/service/types/shop';
  
  // shops是Props解构出来的变量，他是只读的，不可以直接修改，需要从新定义变量接受他的值
  const { shops } = defineProps<{
    shops: IshopInfo[];
  }>();
  
  //子组件自己的ref对象，可以修改
  const myshops = ref<IshopInfo[]>(shops);
  
  //添加商品
  const addShop = (shop: IshopInfo) => {
    myshops.value.push(shop);
  };
  
  //修改某个商品指定属性的值（ts:类型约束）
  const editShop = <k extends keyof IshopInfo>(index:number,filed:k,val:IshopInfo[k]) => {
    // shops.value[0].price = 2000
    // myshops.value[index][filed] = val
    myshops.value[index][filed] = val
  };
  
  //allPrice 计算属性，他涉及不到修改值，所以可以直接使用 Props解构出来的值
  const allPrice = computed(() => {
    return shops.reduce((pre, cur) => {
      return pre + cur.price * cur.count;
    }, 0);
  });
  
  //导出子组件的方法
  defineExpose({
    addShop,
    editShop
  });
  </script>
  
  <style lang="scss">
  /* 主体购物车样式 */
  .shopping-cart {
    font-size: 0.8em !important;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: rgba($color: #000000, $alpha: 0.6);
  }
  
  /* 商品列表 */
  .product-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  /* 购物车总结 */
  .cart-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #ccc;
    text-align: right;
  }
  
  .cart-summary h3 {
    margin-bottom: 10px;
  }
  
  .cart-summary p {
    font-size: 1.2em;
    margin: 5px 0;
  }
  
  .checkout-btn {
    padding: 10px 20px;
    background-color: #2196f3;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1em;
  }
  
  .checkout-btn:hover {
    background-color: #0b7dda;
  }
  </style>